<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import zhCn from "element-plus/es/locale/lang/zh-cn";
const locale = zhCn;
const brandList = ref([])
const brandOptions = [
    {
        value: "option1",
        label: "选项1",
    },
    {
        value: "option2",
        label: "选项2",
    },
    {
        value: "option3",
        label: "选项3",
    },
    {
        value: "option4",
        label: "选项4",
    },
    {
        value: "option5",
        label: "选项5",
    },
    {
        value: "option6",
        label: "选项6",
    },
]

// 表格数据
const tableData = [
    {
        id: 1,
        date: 'SWG-NXAIR',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        id: 2,
        date: 'SWG-80B10',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        id: 3,
        date: 'SWG-80B10',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        id: 4,
        date: 'SWG-NXPLUS C',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        id: 5,
        date: 'SWG-NXPLUS C',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        id: 6,
        date: 'SWG-NXAIR',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        id: 7,
        date: 'SWG-80B10',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        id: 8,
        date: 'SWG-80B10',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        id: 9,
        date: 'SWG-NXPLUS C',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        id: 10,
        date: 'SWG-NXPLUS C',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    }
]

const handleBrandChecked = val => {
    console.log(val);
    brandList.value = val
}

// 时间选择 
const valueTime = ref('')


// 组件卸载时清理
onUnmounted(() => {
})

onMounted(() => {
})
</script>

<template>
    <div class="taberbox">
        <div class="timeBox">
            <div class="timeBox-left">
                <div class="type-item">
                    <div class="seleTitle">Alarm Type</div>
                    <div class="seletBox">
                        <el-select v-model="brandList" multiple placeholder="Select">
                            <el-checkbox-group v-model="brandList" @change="handleBrandChecked">
                                <el-option v-for="item in brandOptions" :key="item.value" :label="item.label"
                                    :value="item.value">
                                    <div>
                                        <el-checkbox :label="item.value">{{ item.label }}</el-checkbox>
                                    </div>
                                </el-option>
                            </el-checkbox-group>
                        </el-select>
                    </div>
                </div>
                <div class="type-item" style="margin-left: 50px;">
                    <div class="seleTitle" style="display: flex;">Start Date <div style="width: 180px;height: 5px;"></div> End Date</div>
                    <div class="seletBox">
                        <el-config-provider :locale="locale">
                            <el-date-picker v-model="valueTime" type="daterange" range-separator="To"
                                start-placeholder="开始时间" end-placeholder="结束时间" size="default" />
                        </el-config-provider>
                    </div>
                </div>
            </div>
            <div class="timeBox-right">
                <el-button type="info" style="width: 120px;">Cancel</el-button>
                <el-button type="primary" style="width: 120px;">Apply</el-button>
            </div>
        </div>
        <div class="biaogeBox">
            <el-table :data="tableData" style="width: 100%" max-height="540">
                <el-table-column prop="date" label="Top Ranking" width="190" />
                <el-table-column prop="name" label="Parent Asset" width="180" />
                <el-table-column prop="address" label="Feeder" />
                <el-table-column prop="address" label="Panel No." center />
                <el-table-column prop="address" label="Event Description" />
            </el-table>
        </div>
    </div>
</template>

<style scoped lang="scss">
.taberbox {
    width: 100%;
    height: 780px;
    background-color: #1c2028;
    padding: 50px 50px 20px 50px;
    box-sizing: border-box;

    .timeBox {
        display: flex;
        justify-content: space-between;
        align-items: end;
        border-bottom: 2px solid #393939;

        .timeBox-left {
            display: flex;
            width: 900px;
            // border: 1px solid #ffffff;
            justify-content: space-between;

            .type-item {
                .seleTitle {
                    color: #929597;
                    font-size: 20px;
                    padding: 10px 0 30px 0;
                    box-sizing: border-box;
                    .timeSele{
                        display: flex !important;
                    }
                }

                .seletBox {
                    width: 300px;

                    .el-select {
                        border-color: black;
                        background-color: #1d2028 !important;
                        height: 50px;

                        :deep(.el-select__wrapper) {
                            // background-color: #1d2028 !important;
                        }

                        :deep(.el-select__popper.el-popper) {
                            background-color: #1d2028 !important;
                        }
                    }



                    :deep(.el-table) {
                        --el-table-border-color: black;
                    }
                }
            }
        }

        .timeBox-right {
            padding: 10px 0 30px 0;
            box-sizing: border-box;
        }
    }

    .biaogeBox {
        padding-top: 50px;
        .el-table {
            border-color: black;

            :deep(th) {
                border: 1px solid #1d2028;
            }

            :deep(td) {
                border: 1px solid #000000;
            }
        }



        :deep(.el-table) {
            --el-table-border-color: black;
        }

        :deep(.el-table) th {
            background: #302f38;
            color: #e9e7e7;
            height: 60px;
            font-size: 18px;
            // text-align: center;
        }

        :deep(.el-table) tr {
            background: #1c222a;
            color: #929597;
            height: 60px;
            font-size: 16px;
        }

        :deep(.el-table__body) tr.current-row>td {
            background-color: #78f709 !important;
            // /* color: #f19944; */
            /* 设置文字颜色，可以选择不设置 */
        }

        :deep(.el-table--enable-row-hover) .el-table__body tr:hover>td {
            // background-color: #f6d604 !important;
            cursor: pointer;
            /* 修改鼠标样式 */
            color: #000000;
            /* 设置文字颜色，可以选择不设置 */
        }

        :deep(.el-table__empty-block) {
            background-color: #000000;
        }
    }

}
</style>
